<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        header,
        main,
        footer {
            width: 1000px;
            margin: 0 auto;
        }

        header {
            height: 150px;
            background-color: silver;

        }

        main {
            height: 400px;
            background-color: orange;
            margin: 10px auto;
        }

        nav, article, aside{
            height: 100%;
            float: left;
        }

        nav{
            width: 200px;
            /* height: 100%; */
            background-color: yellow;
            /* float: left; */
        }

        article{
            width: 580px;
            /* height: 100%; */
            background-color: pink;
            /* float: left; */
            margin: 0 10px;
        }
        aside{
            width: 200px;
            /* height: 100%; */
            background-color: #bfa;
            /* float: left; */
        }


        footer {
            height: 150px;
            background-color: greenyellow;

        }
    </style>
</head>

<body>
    <header>

    </header>
    <main>
        <nav></nav>
        <article></article>
        <aside></aside>
    </main>
    <footer>

    </footer>

</body>

</html>